<template>
  <!-- 我的信息 -->
  <div id="MyNews">
    <header>
      <Navbar navbarText="我的消息" />
    </header>
    <nav>
      <van-search v-model="value"
                  shape="round"
                  placeholder="搜索用户" />
    </nav>
    <div class="privateInfo">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                offset="100"
                @load="onLoad">
        <van-cell-group title="私信内容">
          <van-cell ref="cell"
                    v-for="(msg,index) in msgList.slice(0,9999)"
                    :key="index"
                    :title="msg.fromUser.nickname"
                    :value="msg.time"
                    :to="'/newsInfo?data='+JSON.stringify(msg)">
            <template #label>
              <span v-if="JSON.parse(msg.lastMsg).msg.length>14">{{JSON.parse(msg.lastMsg).msg.slice(0,14)+'...'}}</span>
              <span v-else>{{JSON.parse(msg.lastMsg).msg}}</span>
            </template>
            <template #icon>
              <van-image round
                         width="46"
                         height="46"
                         style="padding-right: 10px"
                         :src="msg.fromUser.avatarUrl" />
            </template>
            <template #right-icon>
              <van-badge v-if="msg.newMsgCount>0"
                         :content="msg.newMsgCount"
                         max="99"
                         class="badge">
                <div class="child" />
              </van-badge>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navbar"
import { formatDate } from "../../../currency"
import { getPrivateLetter, getMsgPrivate } from '@/api/userInfo'
export default {
  name: "MyNews",
  data () {
    return {
      value: "",
      msgList: [],
      loading: false,
      finished: false,
      limit: 10
    };
  },
  components: { Navbar },
  methods: {
    onLoad () {
      this.loading = true
      this.limit = this.limit + 5
      this.initData(this.limit)
    },
    initData (limit) {
      let cookie = this.$store.state.userInfo.cookie
      if (cookie)
      {
        getMsgPrivate(limit, cookie).then(res => {
          if (res.code != 200 || limit > res.newMsgCount)
          {
            this.finished = true
          }
          this.loading = false
          let nowYear = new Date().getFullYear();
          this.msgList = res.msgs.map(item => {
            item.time = formatDate(item.lastMsgTime)
            if (Number(item.time.slice(0, 4)) == nowYear)
            {
              item.time = (item.time.slice(5, 10)).replace('-', '月') + '日'
            } else
            {
              item.time = item.time.slice(2, 10).replace('-', '年').replace('-', '月') + '日'
            }
            return item
          })
        })
      }
    }
  },
  mounted () {
    this.initData(this.limit)
  }
}
</script>

<style scoped>
#MyNews /deep/ .van-nav-bar .van-icon {
  color: #000;
  font-size: 0.6rem;
}
#MyNews /deep/ .van-cell__title {
  flex: 2;
}
.badge {
  position: absolute;
  top: 70%;
  right: 12%;
}
</style>